<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
		<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
	</head>
	<body>
		<br>
		<br>
		<center>
			<h2>商品列表</h2>
		</center>
		<div class="container">
		<p class="text-right">欢迎：</p>
		</div>
		<form class="form-horizontal">
		  <div class="form-group form-group-lg">
			<label class="col-md-2 control-label" for="formGroupInputLarge">商品名称：</label>
			<div class="col-md-7 container">
			  <input class="form-control" type="text" id="name" name="name" placeholder=" input">
			</div>			
			<div class="col-md-3">
			   <input class="btn btn-default btn-lg btn-success" type="button" id="formGroupInputLarge" value="查询">
			</div>
		  </div>
		</form>
		
	<div class="container">
				
		<table class="table table-bordered table-hover" style="font-size: 20px;">
			<thead>
				 <tr>
					 <td>商品编号</td>
					 <td>商品名称</td>
					 <td>商品价格</td>
					 <td>商品产地</td>
					 <td>商品库存</td>
					 <td>商品操作</td>
				 </tr>
			</thead>
			<tbody id="tb">

			</tbody>
        </table>
		  <center>
		     <nav aria-label="Page navigation">
			  <ul class="pagination">
				<li>
				  <a href="javascript:void (0)" aria-label="Previous" onclick="sub()">
					<span aria-hidden="true">&laquo;</span>
				  </a>
				</li>
				<span id="a">

				</span>
				<li>
				  <a href="javascript:void (0)" aria-label="Next" onclick="sup()">
					<span aria-hidden="true">&raquo;</span>
				  </a>
				</li>
			  </ul>
			</nav>
		   </center>
		
    </div>		
		<script>
			var pageNum = 0;
			var prePage = 0;
			var nextPage = 0;
			$(function () {
				pageNum = 1;
				ajax(pageNum);
			})
			function ajax(num) {
				$.ajax({
					url:"/product/show",
					type:"get",
					data:"pageNum="+num,
					success:function (data) {
						list(data);
						navigatepageNums  = data.navigatepageNums;
						$("#a").text("");
						for (var i in navigatepageNums) {
							var li = $("<li>");
							var a = $("<a>");
							a.attr("href","javascript:void (0)");
							a.text(navigatepageNums[i]);
							a.attr("onclick","aa("+navigatepageNums[i]+")");
							li.append(a);
							$("#a").append(li)
						}
						prePage = data.prePage;
						nextPage = data.nextPage;
					}
				})
			}
			function sub() {
				ajax(prePage);
				$("#tb").text("");
			}
			function sup() {
				ajax(nextPage);
				$("#tb").text("");
			}
			function aa(i) {
				ajax(i);
				$("#tb").text("");
			}

			function list(data) {
				var list = data.list;

				for (var i in list) {
					var product = list[i];
					var tr = $("<tr>");
					var tpid = $("<td>");
					tpid.text(product.pid);
					tr.append(tpid);

					var tname = $("<td>");
					tname.text(product.name);
					tr.append(tname);


					var tprice = $("<td>");
					tprice.text(product.price);
					tr.append(tprice);

					var tplace = $("<td>");
					tplace.text(product.place);
					tr.append(tplace);

					var tstock = $("<td>");
					tstock.text(product.stock);
					tr.append(tstock);

					var take = $("<td>");
					var ta = $("<a>");
					ta.attr("href","#");
					ta.text("购买");
					take.append(ta)
					tr.append(take);

					$("#tb").append(tr);
				}
			}
		</script>
	</body>
</html>
